<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染</title>
</head>
<body>
  <div id="app">
    <table width="1000" align="center" border="1">
      <tr>
        <td>顺序号</td>
        <td>标识</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
      </tr>
      <!--index是一个顺序号，不能用来做id-->
      <tr :key="u.id" v-for="(u,index) in users">
        <td>{{index}}</td>
        <td>{{u.id}}</td>
        <td>{{u.username}}</td>
        <td>{{u.age}}</td>
        <td>操作</td>
      </tr>
    </table>
  </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        users:[
          {"id":1,"username":"张三0","age":22},
          {"id":2,"username":"张三1","age":23},
          {"id":3,"username":"张三2","age":24},
          {"id":4,"username":"张三3","age":25},
          {"id":5,"username":"张三4","age":26},
          {"id":6,"username":"张三5","age":27},
          {"id":7,"username":"张三6","age":28},
          {"id":8,"username":"张三7","age":29},
        ]
      }
    })
  </script>
</body>
</html>